<template>
  <div>

    <div align="right">
      <el-button @click="clearFilter">清除所有过滤器</el-button>
    </div>

    <el-table
        ref="filterTable"
        :data="tableData"
        border
        style="width: 100%">

      <el-table-column
          label="设备id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          label="设备名"
          prop="name"
          width="200">
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="typetages"
          align="center"
          filter-placement="bottom-end"
          label="设备类型"
          prop="typeid"
          width="200">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag disable-transitions>
          <span v-for="type in types" v-show="type.id == scope.row.typeid">
            {{type.typename}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          :formatter="formatter"
          label="设备简介"
          prop="description">
      </el-table-column>

      <el-table-column
          :filter-method="filterHandler"
          :filters="statustages"
          filter-placement="bottom-end"
          label="设备状态"
          prop="statusid"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.statusid == 1 ? 'success' : 'warning'"
              disable-transitions>
          <span v-for="status in statuses" v-if="status.id==scope.row.statusid" @click="changestatus(scope.row)">
            {{status.status}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          :filter-method="filterHandler"
          :filters="comefroms"
          filter-placement="bottom-end"
          label="设备来源"
          prop="comefrom"
          width="100">
        <!--      添加状态色-->
        <template slot-scope="scope">
          <el-tag
              :type="getType(scope.row)"
              disable-transitions>
          <span v-for="come in comefroms" v-if="scope.row.comefrom==come.value">
            {{come.text}}
          </span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button
              v-if="!scope.row.borrowable"
              size="mini" @click="handleEdit(scope.$index, scope.row)">修改
          </el-button>
          <el-button
              v-if="!scope.row.borrowable"
              size="mini"
              type="danger" @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
          <el-button
              v-if="scope.row.borrowable"
              size="mini"
              type="waring" @click="handleReturn(scope.$index, scope.row)">返还
          </el-button>
          <el-button
              v-if="scope.row.statusid==1"
              size="mini"
              type="waring" @click="handleSetting(scope.$index, scope.row)">配置产品
          </el-button>
          <el-button
              v-if="scope.row.statusid==2"
              size="mini"
              type="waring" @click="handleFinish(scope.$index, scope.row)">完成
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scheduling:null,
      pageSize: 14,
      total: null,
      statuses:null,
      tableData: null,
      types:null,
      statustages:[],
      typetages:[],
      comefroms:[{text:"租用设备",value:1},{text:"自有设备",value:2}],
      search:null,
      currentPage:1,
    }
  },created(){
    this.getTableData();
    axios.get('http://localhost:8081/equipmenttype/findAll/1/' + this.pageSize).then(
        (response) => {
          this.types = response.data.content;
          for (const type of this.types) {
            const tage = {text: type.typename, value: type.id};
            this.typetages.push(tage);
          }
        }
    );
    axios.get('http://localhost:8081/equipmentstatus/findAll/1/' + this.pageSize).then(
        (response) => {
          this.statuses = response.data.content;

          for (const sta of this.statuses) {
            const tage = {text: sta.status, value: sta.id};
            this.statustages.push(tage);
          }
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.typeid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },handleEdit(index, row) {
      this.$router.push({
        path:'/equipmentUpdate',
        query:{
          id:row.id,
        }
      });
    },
    handleDelete(index, row) {
      if(row.statusid == 2){
        this.$alert('生产中中的设备不可被删除', '不可删除', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message.error({
              message: `错误: 生产中的设备不可被删除`
            });
          }
        });
      }else{
        axios.get('http://localhost:8081/equipment/deleteById/' + row.id).then(
            (response) => {
              if(response.data == "success"){
                this.getTableData();
                this.success();
              }else{
                this.failed();
              }
            });
      }
    },
    handleReturn(index, row) {
      if(row.statusid == 2){
        this.$alert('排产中的设备不可被返还!', '不可返还', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message.error({
              message: `错误: 排产中的设备不可被返还!`
            });
          }
        });
      }else{
        axios.get('http://localhost:8081/equipment/return/' + row.id).then(
            (response) => {
              if(response.data == "success"){
                this.getTableData();
                this.success();
              }else{
                this.failed();
              }
            });
      }
    },
    handleSetting(index,row){
      this.$router.push({
        path:'/capactitysetting',
        query:{
          id:row.id,
        }
      });
    },
    changestatus(row){
      if(row.statusid == 2){
        this.$alert('生产中的设备不可关闭', '不可关闭', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message.error({
              message: `错误: 生产中的设备不可关闭`
            });
          }
        });
      }else{
        axios.get('http://localhost:8081/equipment/changeStatus/' + row.id + '/' + row.statusid).then(
            (response) => {
              if(response.data!=null){
                this.getTableData();
                this.success();
              }
            })
      }
    },
    handleFinish(index,row){
      axios.get('http://localhost:8081/scheduling/finish/' + row.id).then(
          (response) => {
            if(response.data=="success"){
              this.$message({
                message: '生产已完成!',
                type: 'success'
              });
              this.getTableData();
            }else {
              this.$message({
                message: '操作失败!',
                type: 'error'
              });
            }
          }
      )
    },
    success() {
      this.getTableData();
      this.$message({
        message: '操作成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('修改失败!');
    },
    getType(row){
      let type='';
      switch (row.comefrom){
        case 1:
          type='warning';
          break;
        case 2:
          type='success';
          break;
      }
      return type;
    },
    getTableData() {
      if (this.search != null && this.search != "") {
        axios.get('http://localhost:8081/equipment/factorysearch/1/' + this.pageSize + "/" + this.search+'/'+this.$store.state.factoryid).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
              this.getComefrom();
            }
        );
      } else if (this.currentPage != 1) {
        axios.get('http://localhost:8081/equipment/findAll/' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;

            }
        );
      } else {
        axios.get('http://localhost:8081/equipment/findAllByFactoryid/1/' + this.pageSize+'/'+this.$store.state.factoryid).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
              this.getComefrom();
            }
        );
      };
    },
    searchfor(){
      this.currentPage=1;
      this.getTableData();
    },
    getComefrom(){
      for (const row of this.tableData) {
        if (row.borrowable) {
          this.$set(row, "comefrom", 1);
        } else {
          this.$set(row, "comefrom", 2);
        }
      };
    },

  }
}
</script>